<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../css/elementui.css" /> -->
    <link rel="stylesheet" href="../script/elementui/lib/theme-chalk/index.css?t=1">
    <link href="../script/elementui/vue-element-table.css" rel="stylesheet" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/elementui.js"></script>


    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/jquery.signalR-2.4.1.min.js"></script>
    <script type="text/javascript" src="../script/signalr-mediate.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>



    <style type="text/css">
        .content {
            padding: 20px;
        }

        .item {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            border-radius: 8px;
            position: relative;
        }

        .van-field {
            width: 50%;
        }

        .van-field:nth-child(1) {
            width: 100%;
        }

        .van-field__label {
            margin-right: 8px;
            width: auto;
        }

        .number {
            text-align: center;
            margin-right: 8px;
            width: 2em;
            height: 2em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value {
            text-align: left;
            color: #4A4A4A;
            font-weight: 500;
            font-size: 18px;
        }

        .van-cell {
            background-color: transparent;
        }

        .content .item0 {
            background-color: #c2e7b0;
        }

        .content .item1 {
            background-color: #b3d8ff;
        }

        .content .item-1 {
            background-color: #f8f8c4;
        }

        .content .item-2 {
            background-color: #f85757;
        }



        .pointColor {
            display: flex;
            margin-right: 10px;
        }

        .point {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }

        .statusBox {
            background-color: red;
            color: #fff;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .van-cellBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .head {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            width: 100%;
            padding: 7px 20px;
            display: flex;
            justify-content: space-between;
        }

        .headDiv {
            margin-left: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 200px;
        }

        .headDiv>.van-button {
            width: 90px;
        }

        .headDiv2 {
            display: flex;
            align-items: center;
            padding: 5px;
        }

        .headDiv2 .el-date-picker {
            margin: 0 10px
        }

        .headDiv2 .el-select {
            margin: 0 10px
        }

        .headDiv2 .van-button {
            margin: 0 10px
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar id="safeTop" :title="name + '列表'" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="head">

                <div class="headDiv2" v-show='cmdName != "getAlarmList"'>
                    <el-date-picker v-model="StartDate" type="date" placeholder="开始时间" readonly
                        @focus='datePicker("开始")'>
                    </el-date-picker>
                    <el-date-picker v-model="EndDate" type="date" placeholder="结束时间" readonly @focus='datePicker("结束")'>
                    </el-date-picker>

                    <van-button type="primary " size="small" style="width: 80px;" @click='getDataList("搜索")'>搜索
                    </van-button>


                </div>
                <div class="headDiv">
                    <van-button color="#7232dd" size="small" @click='ChangeList("getAlarmList")'>未处理</van-button>
                    <van-button type="primary" size="small" @click='ChangeList("getConfirmAlarmList")'>已处理</van-button>
                </div>
            </div>



            <div class="content">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="item" v-for="(item, index) in tableData" @click="intoItem(item)">

                        <div class="van-cell van-field  van-cellBox">
                            <div style="display: flex;align-items: center;">
                                <div class="van-cell__title van-field__label number">
                                    <span>{{index + 1}}</span>
                                </div>
                                <div class="van-cell__value van-field__value value">{{item.ProductName}}</div>
                            </div>
                            <div class='statusBox'>
                                {{item.IfBJConfirmed}}
                            </div>
                        </div>
                        <van-field v-model="item.GSStartDate" label="开始灌酸时间：" placeholder="请填写开始灌酸时间" readonly>
                        </van-field>
                        <van-field v-model="item.GSSEndDate" label="结束灌酸时间：" placeholder="请填写结束灌酸时间" readonly>
                        </van-field>
                        <van-field v-show='cmdName != "getAlarmList"' v-model="item.KJDate" label="开机时间："
                            placeholder="请填写开机时间" readonly></van-field>
                        <van-field v-show='cmdName != "getAlarmList"' v-model="item.Loop" label="回路："
                            placeholder="请填写回路" readonly></van-field>
                        <van-field v-show='cmdName != "getAlarmList"' v-model="item.Alarm" label="报警内容："
                            placeholder="请填写报警内容" readonly></van-field>


                        <van-field v-show='cmdName == "getAlarmList"' v-model="item.SJQty" label="上架数量："
                            placeholder="请填写上架数量" readonly></van-field>
                        <van-field v-show='cmdName == "getAlarmList"' v-model="item.CSYJDate" label="可抽酸时间："
                            placeholder="请填写可抽酸时间" readonly></van-field>
                        <van-field v-show='cmdName == "getAlarmList"' v-model="item.CSDate" label="抽酸时间："
                            placeholder="请填写抽酸时间" readonly></van-field>
                        <van-field v-show='cmdName == "getAlarmList&&item.GMYJDate"' v-model="item.GMYJDate"
                            label="盖帽时间：" placeholder="请填写盖帽时间" readonly></van-field>
                        <van-field v-show='cmdName == "getAlarmList"' v-model="item.JNo" label="上架号："
                            placeholder="请填写上架号" readonly></van-field>
                    </div>
                </van-list>
            </div>
            <van-popup v-model="datePickerShow" position="bottom">
                <van-datetime-picker v-model="currentDate" type="date" title="选择操作日期" @confirm="onConfirm"
                    @cancel="datePickerShow = false"></van-datetime-picker>
            </van-popup>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshAlarmList'
        }, function (ret) {
            vm.pageIndex = 1
            vm.finished = false
            vm.tableData = []
            vm.getDataList()
        })

        api.addEventListener({
            name: 'getCDAlarmLList'
        }, function (ret) {
            APP.getCDAlarmLList()
        })
        api.addEventListener({
            name: 'getYCKBDataLiist'
        }, function (ret) {
            APP.getYCKBDataLiist()
        })
        vm = new Vue({
            el: '#app',
            data: {
                currentDate: new Date(),
                datePickerShow: false,
                datePickerTitle: '',
                StartDate: '',
                EndDate: '',
                name: api.pageParam.name,
                tableData: [],
                loading: false,
                finished: false,
                pageIndex: 1,
                pageSize: 20,
                cmdName: 'getAlarmList'
            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))

                that.StartDate = APP.getFormatbeforDate()
                that.EndDate = APP.getFormatDate(new Date()).split(' ')[0]

                that.getDataList()
            },
            mounted() {
                APP.setSafeTop()
            },
            methods: {
                ChangeList(val) {
                    var that = this

                    that.cmdName = val
                    that.finished = false
                    that.pageIndex = 1
                    that.tableData = []
                    console.log(JSON.stringify(val))
                    that.getDataList()
                },
                datePicker(val) {
                    var that = this
                    that.datePickerShow = true
                    that.datePickerTitle = val
                },
                onConfirm(date) {
                    var that = this
                    that.datePickerShow = false;

                    var DateTime = APP.getFormatDate(this.currentDate).split(' ')[0]

                    if (that.datePickerTitle == '开始') {
                        that.StartDate = DateTime;
                    } else {
                        that.EndDate = DateTime;
                    }

                },

                onClickLeft() {
                    var that = this
                    api.closeWin()
                    api.sendEvent({
                        name: 'refreshIndexList'
                    })
                },
                onLoad() {
                    var that = this
                    that.pageIndex++
                    that.getDataList()

                },
                getDataList(val) {
                    var that = this
                    var obj

                    if (val == '搜索') {
                        that.finished = false
                        that.pageIndex = 1
                        that.tableData = []
                    }

                    if (that.cmdName == 'getAlarmList') {
                        obj = {
                            pageIndex: that.pageIndex,
                            pageSize: that.pageSize,
                            CJ: JSON.parse(window.localStorage.getItem('userInfo')).classID
                        }
                    }
                    else {
                        obj = {
                            EndDate: that.EndDate,
                            StartDate: that.StartDate,
                            pageIndex: that.pageIndex,
                            pageSize: that.pageSize,
                            CJ: JSON.parse(window.localStorage.getItem('userInfo')).classID
                        }
                    }


                    that.loading = true

                    console.log('obj', JSON.stringify(obj))
                    APP.ajax(that.cmdName, obj, function (res) {
                        console.log('res', JSON.stringify(res))

                        res.ds.map((item) => {
                            if (item.IfBJConfirmed == null) {
                                item.IfBJConfirmed = item.IfBJConfirmed == null ? '未确认' : item.IfBJConfirmed

                            } else {
                                item.IfBJConfirmed = item.IfBJConfirmed == 0 ? '未确认' : ''
                            }
                            // item.IfBJConfirmed = item.IfBJConfirmed == 1 ? '1' : '0'
                        })
                        // that.tableData = res.ds
                        that.tableData.push(...res.ds)

                        console.log('tableData', JSON.stringify(that.tableData))

                        that.loading = false
                        if (res.ds.length < that.pageSize) {
                            that.finished = true
                        }
                    })
                },
                intoItem(row) {
                    var that = this
                    api.openWin({
                        name: 'AlarmDetail',
                        url: 'AlarmDetail.html',
                        pageParam: {
                            name: that.name,
                            MonitorID: row.MonitorID
                        }
                    })
                }
            }
        })
    };
</script>

</html>